

<template>
  <div class="doc-all-container">
    <ContentNav :index-content="leftNav" v-if="onshow"></ContentNav>
    <MidContent class="passage-content"><div v-html="res"></div></MidContent>
    <ContentNav :index-content="content" v-if="onshow"></ContentNav>
    <PassageIndex v-if="id == null"></PassageIndex>
  </div>
</template>

<script setup lang="ts">
import ContentNav from "@/components/Showdocs/ContentNav.vue";
import MidContent from "@/components/Showdocs/MidContent.vue";
import PassageIndex from "@/components/Showdocs/PassageIndex.vue";

import { ref, onMounted, computed } from "vue";
import passage from "@/api/passage";
import { useRouter } from "vue-router";

const router = useRouter();
const id = router.currentRoute.value.params.id;
console.log(id);
const res = ref(null);
const content = ref(null);
const leftNav = ["示例", "示例"];

const onshow = ref(true);

window.addEventListener("resize", () => {
  if (window.innerWidth < 1200) {
    onshow.value = false;
  } else {
    onshow.value = true;
  }
});

onMounted(async () => {
  try {
    // 获取渲染
    const data = await passage.getPassage(Number(id));
    if (!data) {
      console.log("获取文章失败");
    }
    res.value = data.data; // 好抽象
    //end

    // 获取具体内容
    const contentData = await passage.getPassageContent(Number(id));
    if (!contentData) {
      console.log("获取文章内容失败");
    } else {
      const rightnavs = contentData.data.data.nav.split(" "); // 好抽象
      content.value = rightnavs;
    }
    // end
  } catch (err) {
    console.log(err);
  }
});
</script>

<style scoped>
.doc-all-container {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 50px;
}

.passage-content {
  margin-top: 50px;
}
</style>